<template>
  <div>
    <div class="goods"
         v-for="(item,index) of cartarr"
         :key="index">
      {{item.title}}
      <div class="goodsright">
        <i class="cubeic-remove"
           @click="removeCart(index)"></i>
        <span>{{item.cartCount}}</span>
        <i class="cubeic-add"
           @click="addCart(index)"></i>
      </div>
    </div>
    <cube-button class="buy">下单</cube-button>
    <cube-button class="clearCart"
                 @click="handleClear">清空购物车</cube-button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'TobnavCar',
  data () {
    return {

    }
  },
  computed: {
    ...mapState({
      cartarr: state => state.cartArray
    })
  },
  methods: {
    removeCart (index) {
      this.$store.commit('cartRemove', index)
    },
    addCart (index) {
      this.$store.commit('cartAdd', index)
    },
    handleClear () {
      this.$store.state.cartArray = []
    }
  }
}
</script>

<style lang="stylus" scoped>
.goods
  padding: 10px
  text-align: left
  .goodsright
    float: right
    i
      font-size: 19px
.buy
  position: fixed
  bottom: 120px
  font-size: 19px
  margin: 10px 0
.clearCart
  position: fixed
  bottom: 70px
</style>
  